<template>
  <div class="container">
    <div v-if="CarList.length > 0">
      <div class="prod-list" v-for="(item, index) in CarList" :key="index">
        <div class="prod-block">
          <div class="item">
            <div class="btn">
              <label>
                <checkbox
                  @click="onSelectedItem"
                  :data-scindex="scIndex"
                  :data-index="index"
                  :value="prodId"
                  :checked="item.flag"
                  color="#105c3e"
                />
              </label>
            </div>

            <div class="prodinfo">
              <div class="pic">
                <img :src="item.pic" alt="" />
              </div>
              <div class="opt">
                <div class="prod-name">{{ item.prodName }}</div>
                <span>真爱粉</span>
                <view class="price-count">
                  <view class="price">
                    <text class="symbol">￥</text>
                    <text class="big-num">{{ item.price }}</text>
                  </view>
                  <view class="m-numSelector">
                    <view
                      @click="onCountMinus(index)"
                      class="minus"
                      data-scindex="scIndex"
                      data-index="index"
                    ></view>
                    <input type="text" :value="item.prodCount" />
                    <view
                      @click="onCountPlus(index)"
                      class="plus"
                      data-scindex="scIndex"
                      data-index="index"
                    ></view>
                  </view>
                </view>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <div class="cart-footer">
        <div class="btn all">
          <label>
            <checkbox
              @click="onSelAll"
              :data-index="index"
              :value="prodId"
              :checked="allflag"
              color="#105c3e"
            />全选
          </label>
        </div>

        <div @click="del" class="btn del">
          <span>删除</span>
        </div>

        <view class="btn total">
          <view class="finally">
            <text>合计:</text>
            <view class="price">
              <text class="symbol">￥</text>
              <text class="big-num">{{ priceall }}</text>
            </view>
          </view>
          <view class="total-msg" v-if="0 > 0">
            总额:￥{{ wxs.toPrice(0) }} 立减:￥{{ wxs.toPrice(0) }}
          </view>
        </view>
        <view class="btn settle" @click="toFirmOrder">
          <text>结算</text>
        </view>
      </div>
    </div>
    <div class="empty" v-else>
      <view class="img">
        <image src="../../static/images/tabbar/basket.png"></image> </view
      ><view class="txt"> 您还没有添加任何商品哦~ </view>
    </div>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
    <!-- 购物车数量 -->
    <!-- <div class="carCount">{{10}}</div> -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Toast from "@/static/dist/toast/toast";
import { getChangeItem } from "../../services/index.js";
import Dialog from "@/static/dist/dialog/dialog";
export default {
  data() {
    return {
      index: 0,
      scindex: 0,
      flag: false,
      allflag: false,
      arrprice: 0,
      count: 0,
      arrid: [],
    };
  },
  onShow() {
    this.getCarList();
    console.log(this.CarList, "CarList...");
  },
  computed: {
    ...mapState({
      CarList: (state) => state.basket.CarList,
      carId: (state) => state.basket.carId,
      settlement: (state) => state.basket.settlement,
    }),

    priceall() {
      //价格
      return this.CarList.reduce(
        (p, n) => (n.flag ? p + n.prodCount * n.price : p),
        0
      );
    },
  },
  methods: {
    ...mapActions({
      getCarList: "basket/getCarList",
      getTotalPay: "basket/getTotalPay",
      getChangeItem: "basket/getChangeItem",
      getDeleteItem: "basket/getDeleteItem",
      getConfirm: "basket/getConfirm",
    }),

    //单选框
    onSelectedItem(e) {
      this.index = e.currentTarget.dataset.index; // 获取data- 传进来的index
      this.scindex = e.currentTarget.dataset.scindex;
      this.CarList[this.index].flag = !this.CarList[this.index].flag; // 改变状态
      this.getTotalPay(
        this.CarList[this.index].flag ? [this.CarList[this.index].basketId] : []
      );

      // 全选选中
      this.allflag = this.CarList.every((item) => item.flag === true);
      console.log(this.CarList);
    },

    //全选
    onSelAll() {
      this.allflag = !this.allflag;
      this.CarList.forEach((item, index) => {
        this.arrid.push(item.basketId);
      });
      //全选控制单选
      this.CarList.forEach((item, index) => {
        item.flag = this.allflag;
      });
      console.log(this.allflag);
      this.getTotalPay([...this.carId]);
    },

    //加
    async onCountPlus(ind) {
      let result = await getChangeItem({
        count: (this.count = 1),
        prodId: this.CarList[ind].prodId,
        shopId: this.CarList[ind].shopId,
        skuId: this.CarList[ind].skuId,
      });
      if (result) {
        Toast("库存不足");
      } else {
        this.CarList[ind].prodCount++;
      }
    },

    //减
    async onCountMinus(ind) {
      if (this.CarList[ind].prodCount > 1) {
        this.CarList[ind].prodCount--;
        await getChangeItem({
          count: (this.count = -1),
          prodId: this.CarList[ind].prodId,
          shopId: this.CarList[ind].shopId,
          skuId: this.CarList[ind].skuId,
        });
      }
    },

    //删除
    del() {
      let ths = this;
      this.CarList.forEach((item) => {
        if (item.flag) {
          wx.showModal({
            title: "确定要删除选中的商品吗？",
            success(res) {
              if (res.confirm) {
                ths.getDeleteItem(ths.carId);
                ths.getCarList();
              } else if (res.cancel) {
                console.log("用户取消删除");
              }
            },
          });
        } else {
          Toast("请选择商品");
        }
      });
    },

    //结算
    toFirmOrder() {
      this.CarList.forEach((item) => {
        if (item.flag) {
          //跳转页面
          wx.navigateTo({
            url: "/pages/basket/submit-order/index",
          });
        } else {
          Toast("请选择商品");
        }
      });
    },
  },
};
</script>

<style src="./index.css" scoped></style>
